<template lang="html">
  <div class="hp_content">
    <div class="hp_concent_head">
        <img @click="goBack()" class="left" v-bind:src="leftSrc" alt="">
        <img class="right" v-bind:src="collect" alt="">
        <p>{{ date }}</p>
    </div>
    <div class="hp_content_body">
      <img class="hp_content_img" :src="src" alt="">
      <p class="hp_content_author">{{ author }}</p>
      <p class="hp_content_text">{{ text }}</p>
      <p class="hp_content_textauthor">{{ textauthor }}</p>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components:{},
  data(){
    return{
      datas:'',
      src:'',
      date:'',
      author:'',
      text:'',
      textauthor:'',
      leftSrc:'../../static/img/left.png',
      collect:'../../static/img/collect.png'
    }
  },
  created(){
    const oDate = new Date();
    this.oYear=oDate.getFullYear(),
    this.oMonth=oDate.getMonth() + 1,
    this.oDay=oDate.getDate();
    axios.get("http://v3.wufazhuce.com:8000/api/hp/detail/"+this.$route.params.id+"?%20channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((content)=>{
      this.src = content.data.data.hp_img_original_url;
      this.author = content.data.data.hp_author + ' | ' + content.data.data.image_authors;
      this.text = content.data.data.hp_content;
      this.textauthor = content.data.data.text_authors;
      this.date = this.oYear + ' / ' + this.oMonth + ' / ' + this.oDay;
      console.log(content.data.data);
    })
  },
  methods:{
    goBack(){
      history.back();
    }
  }
}
</script>

<style lang="css" scoped>
*{
  margin:0;
  padding:0;
}
.hp_concent_head{
  width:100%;
  height: 4rem;
}
.hp_concent_head>.left{
  float: left;
  margin:1.5rem  0 0 1rem;
}
.hp_concent_head>.right{
  float: right;
  margin:1.2rem 1rem 0 0;
}
.hp_concent_head>p{
  font-size: 2rem;
  padding:1.5rem 0 0 0;
}
.hp_content_body>.hp_content_img{
  width:100%;
  /*修改了高度，不再是100%*/
  height:30rem;
}
.hp_content_body>.hp_content_author{
  color: gray;
  font-size: 1.2rem;
  line-height: 3rem;
}
.hp_content_body>.hp_content_text{
  width:78%;
  margin:1rem auto;
  font-size: 1.4rem;
  line-height: 2.2rem;
  text-align: left;
}
.hp_content_body>.hp_content_textauthor{
  color: gray;
  font-size: 1.2rem;
}
.clear_fixed:after{
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
}
</style>
